// TODO:
import { defineView } from "@/routers/tools.mjs";

/**
 * @implements {ng.IController}
 */

class PopoverDemoCtrl {
  static $inject = ["$scope", "$sce", "$templateCache"];

  /**
   * @param {ng.IScope} $scope
   * @param {ng.ISCEService} $sce
   * @param {ng.ITemplateCacheService} $templateCache
   */
  constructor($scope, $sce, $templateCache) {
    this.$scope = $scope;
    this.$sce = $sce;
    this.$templateCache = $templateCache;
    this.dynamicPopover = {
      content: "Hello, World!",
      templateUrl: "myPopoverTemplate.html",
      title: "Title",
    };

    this.placement = {
      options: [
        "top",
        "top-left",
        "top-right",
        "bottom",
        "bottom-left",
        "bottom-right",
        "left",
        "left-top",
        "left-bottom",
        "right",
        "right-top",
        "right-bottom",
      ],
      selected: "top",
    };

    this.htmlPopover = this.$sce.trustAsHtml(
      html`<b class="text-red-600">I can</b> have
        <div class="label label-success">HTML</div>
        content`,
    );
  }

  $onInit() {
    this.$templateCache.put(
      "myPopoverTemplate.html",
      html`
        <div>{{PopoverDemoCtrl.dynamicPopover.content}}</div>
        <div class="form-group">
          <label>Popup Title:</label>
          <input
            type="text"
            ng-model="PopoverDemoCtrl.dynamicPopover.title"
            class="form-control"
          />
        </div>
      `,
    );
  }
}

/**
 * @type {DefineView}
 */
const uibPopoverView = defineView({
  controller: PopoverDemoCtrl,
  controllerAs: "PopoverDemoCtrl",
  template: /* HTML */ html`
    <div>
      <h4>Dynamic</h4>
      <div class="form-group">
        <label>Popup Text:</label>
        <input
          type="text"
          ng-model="PopoverDemoCtrl.dynamicPopover.content"
          class="form-control"
        />
      </div>
      <div class="form-group">
        <label>Popup Title:</label>
        <input
          type="text"
          ng-model="PopoverDemoCtrl.dynamicPopover.title"
          class="form-control"
        />
      </div>
      <div class="form-group">
        <label>Popup Template:</label>
        <input
          type="text"
          ng-model="PopoverDemoCtrl.dynamicPopover.templateUrl"
          class="form-control"
        />
      </div>
      <button
        uib-popover="{{PopoverDemoCtrl.dynamicPopover.content}}"
        popover-title="{{PopoverDemoCtrl.dynamicPopover.title}}"
        type="button"
        class="btn btn-default"
      >
        Dynamic Popover
      </button>

      <button
        uib-popover-template="PopoverDemoCtrl.dynamicPopover.templateUrl"
        popover-title="{{PopoverDemoCtrl.dynamicPopover.title}}"
        type="button"
        class="btn btn-default"
      >
        Popover With Template
      </button>

      <hr />
      <h4>Positional</h4>
      <div class="form-group">
        <label>Popover placement</label>
        <select
          class="form-control"
          ng-model="PopoverDemoCtrl.placement.selected"
          ng-options="o as o for o in PopoverDemoCtrl.placement.options"
        ></select>
      </div>
      <button
        popover-placement="{{PopoverDemoCtrl.placement.selected}}"
        uib-popover="On the {{PopoverDemoCtrl.placement.selected}}"
        type="button"
        class="btn btn-default"
      >
        Popover {{PopoverDemoCtrl.placement.selected}}
      </button>

      <hr />
      <h4>Triggers</h4>
      <p>
        <button
          uib-popover="I appeared on mouse enter!"
          popover-trigger="'mouseenter'"
          type="button"
          class="btn btn-default"
        >
          Mouseenter
        </button>
      </p>
      <input
        type="text"
        value="Click me!"
        uib-popover="I appeared on focus! Click away and I'll vanish..."
        popover-trigger="'focus'"
        class="form-control"
      />

      <hr />
      <h4>Other</h4>
      <button
        popover-animation="true"
        uib-popover="I fade in and out!"
        type="button"
        class="btn btn-default"
      >
        fading
      </button>
      <button
        uib-popover="I have a title!"
        popover-title="The title."
        type="button"
        class="btn btn-default"
      >
        title
      </button>
      <button
        uib-popover="I am activated manually"
        popover-is-open="PopoverDemoCtrl.popoverIsOpen"
        ng-click="PopoverDemoCtrl.popoverIsOpen = !PopoverDemoCtrl.popoverIsOpen"
        type="button"
        class="btn btn-default"
      >
        Toggle popover
      </button>
      <!-- todo: FAIL -->
      <button uib-popover-html="htmlPopover" class="btn btn-default">
        HTML Popover
      </button>
      <button
        uib-popover-html="'<b>HTML</b>, <i>inline</i>'"
        class="btn btn-default"
      >
        HTML Popover (inline)
      </button>
    </div>
  `,
});

export default uibPopoverView;
